<%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE html><%@ taglib
	uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title>个人中心 - ${user.hdlUserName }</title>
<jsp:include page="/head.jsp" />
<link rel="stylesheet" type="text/css" href="assets/css/main.css" />
<link rel="stylesheet" type="text/css"
	href="assets/plugins/bootstrap-table/bootstrap-table.min.css" " />
<script src="assets/plugins/bootstrap-table/bootstrap-table.min.js"
	type="text/javascript" charset="utf-8"></script>
<script
	src="assets/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
	type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.contentlyb {
	width: 620px;
	height: 150px;
	/*background: rgba(173,216,230,0.7);*/
	position: absolute;
	top: calc(120% - 79px);
	left: calc(50% - 300px);
	z-index: 50;
	display: none;
	transition: 1s;
}

#textarea {
	border-radius: 5px;
}

#send {
	background: #FF8B2D;
	outline: none;
	border-radius: 5px;
	color: whitesmoke;
	float: right;
}
</style>
</head>
<body>
	<c:set scope="request" var="header" value="-1" />
	<div style="background-color: rgb(233, 236, 239);">
		<div class="container-md">
			<nav aria-label="breadcrumb">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="./">首页</a></li>
					<li class="breadcrumb-item "><a href="order-1.let">个人中心</a></li>
					<li class="breadcrumb-item active">中心首页</li>
				</ol>
			</nav>
		</div>
	</div>
	<div class="container-md">
		<div class="row">
			<div class="col-sm-3 left-menu">
			</div>
			<div class="col-sm-9"
				style="border: solid rgba(0, 0, 0, 0.1) 1px; box-shadow: 0 0 .3rem rgba(0, 0, 0, 0.3); border-radius: 5px; padding: 10px; z-index: 1;">
				<div class="_info">
					<h2>订单详情</h2>
					<h3 class="pl-3">
						订单号:  <span class="ml-2" data-field="orderId">${order.mallOrderNum }</span>
					</h3>
					<h3 class="pl-3">
						下单人:  <span class="ml-2" data-field="userName">${user.hdlUserName }</span> - <span data-field="userNickname">${user.hdlUserRealname }</span>
					</h3>
					<hr />
					<table class="table table-bordered">
						<tr>
							<th style="width: 6rem; text-align: right;">订单时间</th>
							<td data-field="orderTime">${order.mallOrderDate }</td>
							<th style="width: 6rem; text-align: right;">订单金额</th>
							<td data-field="orderMoney" data-formatter="moneyFormatter">${order.mallOrderCash }</td>
						</tr>
						<tr>
							<th style="width: 6rem; text-align: right;">收货人</th>
							<td data-field="orderAddressName">${order.mallOrderName }</td>
							<th style="width: 6rem; text-align: right;">收货电话</th>
							<td data-field="orderAddressTel">${order.mallOrderPhone }</td>
						</tr>
						<tr>
							<th style="width: 6rem; text-align: right;">收货地址:</th>
							<td colspan="3"><span data-field="address">
								<span data-field="orderAddressInfo">${order.mallOrderAddress }</span></td>
						</tr>

						<tr>
							<th style="width: 6rem; text-align: right;">支付时间</th>
							<td data-field="orderPayTime">${order.mallOrderPayfortime }</td>
							<th style="width: 6rem; text-align: right;">发货时间</th>
							<td data-field="orderTrackingTime">${order.mallOrderSendtime }</td>
						</tr>
						<tr>
							<th style="width: 6rem; text-align: right;">订单状态</th>
							<c:if test="${order.mallOrderStatus ==1 }">
								<td data-field="orderStatus" data-formatter="statusFormatter">未支付</td>
							</c:if>
							<c:if test="${order.mallOrderStatus ==2 }">
								<td data-field="orderStatus" data-formatter="statusFormatter">待发货</td>
							</c:if>
							<c:if test="${order.mallOrderStatus ==3 }">
								<td data-field="orderStatus" data-formatter="statusFormatter">待收货</td>
							</c:if>
							<c:if test="${order.mallOrderStatus ==4 }">
								<td data-field="orderStatus" data-formatter="statusFormatter">已收货</td>
							</c:if>
						</tr>
					</table>
				</div>
				<hr />
				<table class="table-hover" style="width:100%">
					<thead>
						<tr>
							<th data-width="40" data-align="center"
								data-formatter="indexFormatter">#</th>
							<th data-align="left" data-field="productId" data-formatter="productFormatter">商品</th>
							<th>商品名称</th>
							<th data-align="center" data-field="orderDetailMoney" data-formatter="moneyFormatter">价格</th>
							<th data-align="center" data-field="orderDetailNum">数量</th>
							<th>评论</th>
						</tr>
					</thead>
					<c:forEach items="${vo }" var="item" varStatus="s">
						<tr>
							<td>
								${s.count }
							</td>
							<td>
								<img alt="" src="${item.product.mallProductPath }" style="width;50px;height:50px">
							</td>
							<td>
								${item.product.mallProductName }
							</td>
							<td>
								${item.detailTotal }
							</td>
							<td>${item.detailNum }</td>
							<c:if test="${order.mallOrderStatus != 4 }">
								<td>签收后在评论！亲</td>
							</c:if>
							<c:if test="${order.mallOrderStatus == 4 }">
								<td style="cursor:pointer" onclick="javascript:send('${item.product.mallProductId}')">评论</td>
							</c:if>
						</tr>
					</c:forEach>
				</table>

			</div>
		</div>
	</div>
	<!-- 留言板 -->
	<div class="contentlyb">
		<h2>欢迎对商品进行评论</h2>
		<textarea name="" id="textarea" cols="100" rows="5"
			style="resize: none"></textarea>
		<input type="button" id="send" value="发表">
	</div>
	<!-- <script type="text/javascript" src="user/order-look.js"></script> -->
	<%-- <jsp:include page="/footer.jsp" /> --%>
</body>
</html>
<script>

	var mallProductId = null;

	function send(id){
		$(".contentlyb").css("display","block");
		mallProductId = id;
	}
	
	$("#send").click(function(){
		var message = document.querySelector("#textarea").value;
		
		//发送请求
		$.post(
				"commentAdd.let",
				{mallCommentMessage:message,mallProductId:mallProductId},
				function(data){
					if(data.code == 1){//发送失败
						sys.toastr.warn(data.msg);
					}else{
						$("#textarea").val("");
						$(".contentlyb").css("display","none")
						sys.toastr.success(data.msg);
					}
				}
				)
	})
</script>
